<template>
  <div class="leftAside">
    <div class="leftAside-menu-all">
      <div :class="this.menu === 1 ? 'leftAside-menu-one' :'leftAside-menu' " @click="handleMenu(1)">
        设备警报
      </div>
      <div :class="this.menu === 2 ? 'leftAside-menu-one' :'leftAside-menu'" @click="handleMenu(2)">
        物资柜展示
      </div>
      <div :class="this.menu === 3 ? 'leftAside-menu-one' :'leftAside-menu'" @click="handleMenu(3)">
        物资分类管理
      </div>
    </div>

<!--    <el-collapse v-model="activeName" accordion>-->
<!--      <el-collapse-item title="工厂示意图" name="1">-->
<!--&lt;!&ndash;        <div class="left-aside" ref="leftAside"></div>&ndash;&gt;-->
<!--      </el-collapse-item>-->
<!--      <el-collapse-item title="物资柜展示">-->

<!--      </el-collapse-item>-->

<!--      <el-collapse-item title="gif">-->

<!--      </el-collapse-item>-->
<!--    </el-collapse>-->
  </div>
</template>

<script>
import Konva from 'konva';

export default {
  data() {
    return {
      activeName: '0',
      menu:1,
    };
  },

  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    handleMenu(item){
      this.menu=item
      console.log(item,'item')
      this.$emit('handleMenu',item)
    },
    init() {
      const leftAside = this.$refs.leftAside;
      const stage = new Konva.Stage({
        width: 200,
        height: 300,
        container: leftAside,
      });
      const layer = new Konva.Layer();

      const svgImages = [
        { src: require('@/assets/svg/24gl-square.svg'), type: 'image', x: 20, y: 20, width: 50, height: 50,name:'rect' },
        { src: require('@/assets/svg/圆形未选中.svg'), type: 'image', x: 120, y: 20, width: 60, height: 60,name:'circle' },
        { src: require('@/assets/svg/长方形.svg'), type: 'image', x: 20, y: 120, width: 50, height: 50 ,name:'rect2' },
        { src: require('@/assets/svg/sector.svg'), type: 'image', x: 120, y: 120, width: 50, height: 50,name:'sector' },
        { src: require('@/assets/svg/电箱b.svg'), type: 'image', x: 20, y: 190, width: 50, height: 50,name:'ele' },
        { src: require('@/assets/svg/人.svg'), type: 'image', x: 120, y: 190, width: 50, height: 50,name:'people' },
        { src: require('@/assets/svg/人-多人.svg'), type: 'image', x: 20, y: 260, width: 50, height: 50,name:'peoples' },

      ];

      svgImages.forEach((imageData) => {
        const img = new Image();
        img.src = imageData.src;
        img.onload = () => {
          const image = new Konva.Image({
            x: imageData.x,
            y: imageData.y,
            image: img,
            width: imageData.width,
            height: imageData.height,
          });

          // 绑定拖拽事件
          image.on('click', () => {
            const data = {
              type: imageData.type,
              config: { ...imageData, draggable: true }
            };
            this.$emit('addElementToMain', data);
          });

          layer.add(image);
          layer.batchDraw();
        };
      });

      stage.add(layer);
    }
  }
};
</script>

<style scoped src="./LeftAside.css"></style>
